<!-- <template>
  <div>

  </div>
</template>

<script setup lang="ts">

import { heartBeat, stateChange, login } from '../service/basic'

// HH: socket.io 测试
import { inject } from 'vue'
const socket = inject<any>('socket')


socket.on('connect', (res:any) => {
  // console.log('#connect: ', res)
  const id = socket.id;
  console.log('#connect,', id, res)
  // 给服务端发消息
  socket.emit('chat', 'hello world!', '给客户端发消息')
})


// 系统事件
socket.on('disconnect', (msg:any) => {
   console.log('#disconnect', msg)
});

socket.on('disconnecting', () => {
   console.log('#disconnecting')
});

socket.on('error', () => {
   console.log('#error')
})

socket.on('connection', (res:any) => {
  console.log('#connection: ', res)
})

socket.on('connected', (res:any) => {
  console.log("#connected: ", res);
})

socket.on('message', (res:any) => {
  console.log("#message: ", res)
})

socket.on('res', (res:any) => {
  console.log("#res: ", res)
})

const handleSendMessage = () => {
  socket.emit("chat", "{ text: '客户端发送的消息'}")
  socket.emit('chat', 'AAA', 'AAA-给客户端发消息')
  socket.emit('hey', 'AAA', 'AAA-给客户端发消息')
}


// HH: Vue 声明区域 =============================
const emit = defineEmits(['weEvent', 'weHeartBeatEvent'])
const props = defineProps()

// HH: 常量区域 =================================
const LOGIN_ERROR_KEY = 'LOGIN_ERROR'
const LOGIN_SUCCESS_KEY = 'LOGIN_SUCCESS'
const HEART_BEAT_KEY = 'HEART_BEAT'

// 登录按钮是否显示 loading
let loginLoading = ref(false)
// 是否已经登录
let isLogined = ref(false)
// 心跳定时任务
let heartBeatInterval:any = null
// 心跳锁
let heartBeatLocked = false


// HH: 初始化钩子函数区域 ========================
onMounted(() => {
  console.log('mounted!')
  emit('weEvent', true)

  // // 连接成功
  // socket.on("connect", () => {
  //   socket.emit('chat', 'connected..') //必需要回应socket-server这句话
  //   console.log(socket.id, '监听客户端连接成功-connect')
  // })

  // socket.on('res', message => {
  //   console.warn(socket.id, message)
  // })

  // // 房间好友上线通知
  // socket.on("handlRequest", (message) => {
  //   console.log('>> handlRequest', message)
  //   alert(message)
  // })

  // // 收到的消息
  // socket.on("receiveMsg", (msg, id) => {
  //   // arr为消息列表
  //   arr.value.push(`${id}：${msg}`)
  // })
})
onUpdated(() => {
  console.log('updated!')
})
onUnmounted(() => {
  console.log('unmounted!')
})

// HH: 自定义方法区域 ============================
const handleLogin = async () => {
  loginLoading = ref(true)

  const loginfo = {
    username: 'aaa',
    password: 'bbb'
  }

  // await sleep(3000)
  login(loginfo).then(res => {
    loginLoading = ref(false)
    isLogined = ref(res.ErrorCode === 0)

    if (isLogined) {
      showMessage('success', LOGIN_SUCCESS_KEY, '登录成功', 10)
    } else {
      
      showMessage('error', LOGIN_ERROR_KEY, `警告：${res.ErrorMsg}`)
    }
  })
}

// HH: 开启/关闭心跳
const changeHeartBeat = function () {
  if (heartBeatInterval) {
    clearInterval(heartBeatInterval)
    heartBeatInterval = null
    heartBeatLocked = false
    showMessage('success', HEART_BEAT_KEY, '关闭心跳', 10)
  } else {
    heartBeatInterval = setInterval(() => {
      // HH: 优化性能，如果心跳锁已经被锁定，则不再重复发送心跳，等待请求结束解锁
      if (heartBeatLocked) return false
      
      heartBeatLocked = true
      heartBeat().then((res:any) => {
        heartBeatLocked = false
        emit('weHeartBeatEvent', res)
      })
    }, 100)
    showMessage('success', HEART_BEAT_KEY, '开启心跳', 10)
  }
}

// HH: 显示提示弹窗
const showMessage = function (type:any, key:any, content:any, duration = 0) {
  message[type]({
    content: () => content,
    duration: duration,
    key: key,
    onClick: () => {
      console.log('关闭弹窗')
      message.destroy(key)
    }
  })
}
</script>

<style scoped>

</style> -->